<template>
  <div class="examAnalysis tapStyle">
    <div class="toolbox">
      <div class="toolbox-row">
        <span>时间选择 : </span>
        <div class="layoutBox" style="width:242px">
          <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>&emsp;&emsp;
        <span>断面编码或名称 : </span>
        <div class="layoutBox" style="width:150px">
          <el-input v-model="sectionName" placeholder="请输入"></el-input>
        </div>&emsp;
        <span>所属行政区 : </span>
        <div class="layoutBox" style="width:120px">
          <el-select v-model="value"  placeholder="请选择" @change="">
            <el-option
              v-for="item in optionData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>&emsp;&emsp;
        <span>所属流域 : </span>
        <div class="layoutBox" style="width:120px">
          <el-select v-model="value"  placeholder="请选择" @change="">
            <el-option
              v-for="item in optionData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>&emsp;&emsp;
        <el-button @click=""><i class="iconfont icon-sousuo"></i>查询</el-button>
        <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="toolbox-row">
        <span>是否验收 : </span>
        <div class="layoutBox" style="width:120px">
          <el-select v-model="value" placeholder="请选择" @change="">
            <el-option
              v-for="item in optionData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>&emsp;&emsp;
        <span>包&emsp;&emsp;件 : </span>
        <div class="layoutBox" style="width:120px">
          <el-select v-model="value"  placeholder="请选择" @change="">
            <el-option
              v-for="item in optionData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>&emsp;&emsp;
      </div>
    </div>
    <div class="containerbox">
      <yf-tabs type="border-card" @tab-click="toggleTab">
        <yf-tab-pane label="日质控">
          <div class="tablebox" style="height: 100%">
            <el-table
              :data="tableData"
              height="100%"
              border
              style="width: 100%">
              <el-table-column
                prop="package"
                fixed
                label="包件">
              </el-table-column>
              <el-table-column
                prop="company"
                fixed
                width="130"
                label="运营公司">
              </el-table-column>
              <el-table-column
                prop="identity"
                fixed
                width="130"
                label="运营身份">
              </el-table-column>
              <el-table-column label="合格率(%)">
                  <el-table-column
                    prop="hglGMSY"
                    label="高猛酸钾盐指数">
                  </el-table-column>
                  <el-table-column
                    prop="hglAD"
                    label="氨氮">
                  </el-table-column>
                  <el-table-column
                    prop="hglZL"
                    label="总磷">
                  </el-table-column>
                  <el-table-column
                    prop="hglZD"
                    label="总氮">
                  </el-table-column>
              </el-table-column>
              <el-table-column label="完成率(%)">
                  <el-table-column
                    prop="wclGMSY"
                    label="高猛酸钾盐指数">
                  </el-table-column>
                  <el-table-column
                    prop="wclAD"
                    label="氨氮">
                  </el-table-column>
                  <el-table-column
                    prop="wclZL"
                    label="总磷">
                  </el-table-column>
                  <el-table-column
                    prop="wclZD"
                    label="总氮">
                  </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane label="周质控">
          <div class="tablebox" style="height: 100%">
            <el-table
              :data="tableData"
              border
              height = "100%"
              style="width: 100%">
              <el-table-column
                prop="package"
                fixed
                label="包件">
              </el-table-column>
              <el-table-column
                prop="company"
                fixed
                width="130"
                label="运营公司">
              </el-table-column>
              <el-table-column
                prop="identity"
                fixed
                width="130"
                label="运营省份">
              </el-table-column>
              <el-table-column label="合格率(%)">
                <el-table-column
                  prop="hglPh"
                  label="pH">
                </el-table-column>
                <el-table-column
                  prop="hglRJY"
                  label="溶解氧">
                </el-table-column>
                <el-table-column
                  prop="hglDDL"
                  label="电导率">
                </el-table-column>
                <el-table-column
                  prop="hglZD"
                  label="浊度">
                </el-table-column>
              </el-table-column>
              <el-table-column label="完成率(%)">
                <el-table-column
                  prop="wclPh"
                  label="pH">
                </el-table-column>
                <el-table-column
                  prop="wclRJY"
                  label="溶解氧">
                </el-table-column>
                <el-table-column
                  prop="wclDDL"
                  label="电导率">
                </el-table-column>
                <el-table-column
                  prop="wclDD"
                  label="浊度">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane label="月质控-多点线性">
          <div class="tablebox" style="height: 100%">
            <el-table
              :yfdata="tableData"
              height="100%"
              border
              style="width: 100%">
              <el-table-column
                prop="package"
                fixed
                label="包件">
              </el-table-column>
              <el-table-column
                prop="company"
                fixed
                width="130"
                label="运营公司">
              </el-table-column>
              <el-table-column
                prop="identity"
                fixed
                width="130"
                label="运营身份">
              </el-table-column>
              <el-table-column label="合格率(%)">
                <el-table-column
                  prop="hglGMSY"
                  label="高猛酸钾盐指数">
                </el-table-column>
                <el-table-column
                  prop="hglAD"
                  label="氨氮">
                </el-table-column>
                <el-table-column
                  prop="hglZL"
                  label="总磷">
                </el-table-column>
                <el-table-column
                  prop="hglZD"
                  label="总氮">
                </el-table-column>
              </el-table-column>
              <el-table-column label="完成率(%)">
                <el-table-column
                  prop="wclGMSY"
                  label="高猛酸钾盐指数">
                </el-table-column>
                <el-table-column
                  prop="wclAD"
                  label="氨氮">
                </el-table-column>
                <el-table-column
                  prop="wclZL"
                  label="总磷">
                </el-table-column>
                <el-table-column
                  prop="wclZD"
                  label="总氮">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane label="月质控-集成干预">
          <div class="tablebox" style="height: 100%">
            <el-table
              :yfdata="tableData"
              height="100%"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="area"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="sectionName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column  label="高锰酸盐">
                <el-table-column
                  prop="gmsyReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="gmsyQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="gmsyRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="氨氮">
                <el-table-column
                  prop="adReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="adQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="adRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="zlQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="zlRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane label="月质控-实际水样对比">
          <div class="tablebox" style="height: 100%">
            <el-table
              :data="tableData"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="area"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="sectionName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column label="水温">
                <el-table-column
                  prop="swReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="swQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="swRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="pH">
                <el-table-column
                  prop="phReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="phQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="phRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="溶解氧">
                <el-table-column
                  prop="rjyReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="rjyQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="rjyRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="电导率">
                <el-table-column
                  prop="ddvReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="ddvQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="ddvRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="浊度">
                <el-table-column
                  prop="zdReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="zdQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="zdRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane label="月质控-加标回收">
          <div class="tablebox" style="height: 100%">
            <el-table
              :yfdata="tableData"
              height="100%"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="area"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="sectionName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column  label="高锰酸盐">
                <el-table-column
                  prop="gmsyReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="gmsyQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="gmsyRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="氨氮">
                <el-table-column
                  prop="adReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="adQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="adRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="zlQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="zlRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总氮">
                <el-table-column
                  prop="zdReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="zdQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="zdRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
      </yf-tabs>

    </div>

  </div>
</template>

<script>
  export default {
    name: "examAnalysis",
    data() {
      return {
        dateRange: "", //时间选择
        sectionName: "", //断面名称
        value: "",
        optionData: [
          { value: 1, label: "水温", standard: "", isShow: true },
          { value: 2, label: "pH", standard: "6~9", isShow: true },
          { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
          { value: 4, label: "电导率", standard: "", isShow: true },
          { value: 5, label: "浊度", standard: "", isShow: true },
          { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
          { value: 7, label: "氨氮", standard: "1", isShow: true },
          { value: 8, label: "总磷", standard: "0.2", isShow: true },
          { value: 9, label: "总氮", standard: "", isShow: true }
        ],
        tableData: [],
        projectSet: false,
        dialogData: [
          {
            monitoringItems: "高锰酸钾",
            waterQuality: "",
            spanValue: "",
            zeroPoint: "",
            span: ""
          },
          {
            monitoringItems: "氨氮",
            waterQuality: "",
            spanValue: "",
            zeroPoint: "",
            span: ""
          },
          {
            monitoringItems: "总磷",
            waterQuality: "",
            spanValue: "",
            zeroPoint: "",
            span: ""
          },
          {
            monitoringItems: "总氮",
            waterQuality: "",
            spanValue: "",
            zeroPoint: "",
            span: ""
          }
        ]
      };
    },
    methods: {
      toggleTab(val) {}
    },
    created() {
      this.$store.commit("setShowlefttree", true);
    }
  };
</script>

<style scoped lang="less">
  .examAnalysis {
    height: calc(100% - 30px);
    .containerbox {
      padding: 6px 12px;
      height: calc(100% - 68px);
    }
  }
  .editInput {
    width: 50px;
    border: none;
    outline: none;
  }
  .toolbox-row {
    margin-bottom: 6px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
